<!-- author: xuett -->
<!-- date: 2025-03-19 09:24:40 -->
<!-- description: 导出文档类型选择 -->
<template>
  <el-dialog v-model="dialogVisible" title="导出文档" width="432px" @close="close" align-center>
    <div class="type-select-box">
      <div class="select-title">文件格式：</div>
      <div class="type-list">
        <div :class="['type-item', activeType == 'word' ? 'active-type' : '']" @click="selectType('word')">
          <GsvgIcon class="type-icon" icon="word"></GsvgIcon>
          <span class="type-text">.Word</span>
        </div>
        <div :class="['type-item', activeType == 'pdf' ? 'active-type' : '']" @click="selectType('pdf')">
          <GsvgIcon class="type-icon" icon="pdf"></GsvgIcon>
          <span class="type-text">.PDF</span>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button :loading="exportLoading" type="primary" @click="confirmExport"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import api from "@/service/container";
import fileDown from "@/utils/fileDownload";

const state = reactive({
  dialogVisible: false,
  activeType: null,
  editorContent: "",
  exportLoading: false
});
const { dialogVisible, activeType, exportLoading } = toRefs(state);

//打开弹窗
const show = (editorContent) => {
  state.dialogVisible = true;
  state.activeType = null;
  state.editorContent = editorContent;
};

//选择类型
const selectType = (type) => {
  state.activeType = type;
};

//确定导出
const confirmExport = () => {
  if (state.activeType) {
    state.activeType == "word" ? exportWord() : exportPdf();
  } else {
    ElMessage.warning("请选择导出类型!");
  }
};
//导出为word
const exportWord = () => {
  // const content = state.editorContent;
  // const converted = htmlDocx.asBlob(content);
  // //名称加时间戳
  // let wordName = "新增专业申请表" + Date.now();
  // saveAs(converted, wordName + ".docx");
  // close();
  state.exportLoading = true;
  api
    .htmlToWord({
      html: encodeURIComponent(state.editorContent)
    })
    .then((res) => {
      //   console.log(res);
      fileDown(res, "新增专业申请表.docx");
      close();
      state.exportLoading = false;
    });
};

//导出为PDF
const exportPdf = () => {
  close();
};

//关闭
const close = () => {
  state.dialogVisible = false;
  state.activeType = null;
};

defineExpose({ show });
</script>

<style scoped lang="scss">
.type-select-box {
  width: 100%;
  padding: 14px 8px 44px;
  .select-title {
    font-family: Alibaba PuHuiTi-Regular;
    font-size: 14px;
    color: rgba($color: #000000, $alpha: 0.4);
    line-height: 22px;
    margin-bottom: 16px;
  }
  .type-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .type-item {
      width: 180px;
      height: 110px;
      padding: 20px 20px;
      box-shadow: 0px 10px 20px 0px rgba(0, 87, 255, 0.1);
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: flex-end;
      cursor: pointer;
      &:hover {
        border: 1px solid #0057ff;
      }
      .type-icon {
        width: 72px;
        height: 70px;
      }
      .type-text {
        font-family: Alibaba PuHuiTi-Regular;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        margin-bottom: 4px;
      }
    }
    .active-type {
      border: 1px solid #0057ff;
    }
  }
}
</style>
